<template>
    <div class="review-discount">
        <TechCell v-if="couponsAmount"
            title="商品劵" type="red"
            is-link
            miniIcon="couponfill"
            miniIconTheme="#FFB472"
            :value="`- ￥${couponsAmount}`"
            @click="openSelectCoupons"
        />
        <TechCell v-else
            title="商品劵"
            is-link
            miniIcon="couponfill"
            miniIconTheme="#FFB472"
            :type="`${couponCanUseNumber ? 'red-block' : 'gray'}`"
            :value="`${couponCanUseNumber ? couponCanUseNumber + '张' : '暂无'}可用`"
            @click="openSelectCoupons"
            :mode="mode"
            :theme="theme"
            :styleMode="styleMode"
        />
        <TechCell v-if="redPacketAmount"
            title="红包"
            type="red"
            is-link
            miniIcon="couponfill"
            miniIconTheme="#FE847A"
            :value="`- ￥${redPacketAmount}`"
            @click="openSelectRedPacket"
        />
        <TechCell v-else
            title="红包"
            is-link
            miniIcon="couponfill"
            miniIconTheme="#FE847A"
            :type="`${redPacketCanUseNumber ? 'red-block' : 'gray'}`"
            :value="`${redPacketCanUseNumber ? redPacketCanUseNumber + '张' : '暂无'}可用`"
            @click="openSelectRedPacket"
        />
    </div>
</template>

<script>
import { TechCell } from '@components/base';
import ModeMixin from '@common/mixin';
export default {
    name: 'ReviewDiscount', // 订单优惠项信息
    mixins: [ModeMixin],
    components: {
        TechCell,
    },
    props: {
    },
    data() {
        return {
            couponsAmount: 0,
            couponCanUseNumber: 0,
            redPacketAmount: 0,
            redPacketCanUseNumber: 0,
        };
    },
    methods: {
        openSelectRedPacket() {
            this.$emit('redPacket');
        },
        openSelectCoupons() {
            this.$emit('coupons');
        },
        redPacketResult(val) {
            // logger.info('选择红包的结果', val);
        },
        couponsResult(flag) {
            // logger.info('是否使用商品券：', flag);
        },
    },
};
</script>

<style lang="less">

</style>
